<!DOCTYPE html>
<html th:lang="#{lang}">
<head>
    <title th:text="#{title}"></title>
    <meta name="keywords" th:content="#{keywords}">
    <meta name="description" th:content="#{description}">
    <div th:replace="common/meta"></div>
</head>
<body>

<div th:replace="common/header-home:: header(${lang})"></div>

<div th:replace="common/cate:: cate(${cates})"></div>

<nav class="classification">
    <ul class="flexbox">
        <li class="flex1"></li>
        <li class="flex1 text active" href="/" th:text="#{home}">#{home}</li>
        <li class="flex1 text " href="/rank" th:text="#{rank}">#{rank}</li>
        <li class="flex1 text " href="/cate" th:text="#{cate}">#{cate}</li>
        <li class="flex1"></li>
    </ul>
</nav>
<div class="banner">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" th:each="random:${random1}">
            <a th:href="${'/comic/'+random.id}">
                <img th:src="${random.cover}" th:alt="${random.title}">
            </a>
        </li>
    </ul>    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>

<div class="category_info">
    <div class="hot_recommend three detail-info">
        <h3><i><img src="/static/img/random7.png" width=100% height=100% /></i><span th:text="#{hot}">HOT</span>
            <a href="/rank" class="more">
                <span class="more_text" th:text="#{more}">MORE..</span>
                <img src=""
                     class="more_icon">
            </a>
        </h3>
        <ul class="flexbox">
            <li class='flex1' th:each="r,state:${random2}" th:if="${state.index < 3}">
                <a th:href="${'/comic/'+r.id}">
                    <span class='pic'><img th:src='${r.cover}' th:alt='${r.title}'></span>
                    <h6 th:text="${r.title}"></h6>
                    <p class='ellipsis' th:text="${r.intro}">intro....</p>
                </a>
            </li>
        </ul>
        <ul class="flexbox">
            <li class='flex1' th:each="r,state:${random2}" th:if="${state.index>2 and state.index < 6}">
                <a th:href="${'/comic/'+r.id}">
                    <span class='pic'><img th:src='${r.cover}' th:alt='${r.title}'></span>
                    <h6 th:text="${r.title}"></h6>
                    <p class='ellipsis' th:text="${r.intro}">intro....</p>
                </a>
            </li>
        </ul>
        <ul class="flexbox">
            <li class='flex1' th:each="r,state:${random2}" th:if="${state.index > 5}">
                <a th:href="${'/comic/'+r.id}">
                    <span class='pic'><img th:src='${r.cover}' th:alt='${r.title}'></span>
                    <h6 th:text="${r.title}"></h6>
                    <p class='ellipsis' th:text="${r.intro}">intro....</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="hot_recommend three detail-info">
        <h3><i><img src="/static/img/random5.png" width=100% height=100% /></i><span th:text="#{new}">NEW</span>
            <a href="/cate" class="more">
                <span class="more_text" th:text="#{more}">MORE..</span>
                <img src=""
                     class="more_icon">
            </a>
        </h3>
        <ul class="flexbox">
            <li class='flex1' th:each="r,state:${random3}" th:if="${state.index < 3}">
                <a th:href="${'/comic/'+r.id}">
                    <span class='pic'><img th:src='${r.cover}' th:alt='${r.title}'></span>
                    <h6 th:text="${r.title}"></h6>
                    <p class='ellipsis' th:text="${r.intro}">intro....</p>
                </a>
            </li>
        </ul>
        <ul class="flexbox">
            <li class='flex1' th:each="r,state:${random3}" th:if="${state.index>2 and state.index < 6}">
                <a th:href="${'/comic/'+r.id}">
                    <span class='pic'><img th:src='${r.cover}' th:alt='${r.title}'></span>
                    <h6 th:text="${r.title}"></h6>
                    <p class='ellipsis' th:text="${r.intro}">intro....</p>
                </a>
            </li>
        </ul>
        <ul class="flexbox">
            <li class='flex1' th:each="r,state:${random3}" th:if="${state.index > 5}">
                <a th:href="${'/comic/'+r.id}">
                    <span class='pic'><img th:src='${r.cover}' th:alt='${r.title}'></span>
                    <h6 th:text="${r.title}"></h6>
                    <p class='ellipsis' th:text="${r.intro}">intro....</p>
                </a>
            </li>
        </ul>
    </div>
</div>

<div th:replace="common/footer"></div>
</body>
<div th:replace="common/js"></div>
</html>
